<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <!-- 主表单区域 -->
            <a-form :form="form" slot="detail">
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="制品品番" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['productsSku', validatorRules.productsSku]"
                                placeholder="请输入制品品番"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="制品背番" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['productsBack', validatorRules.productsBack]"
                                placeholder="请输入制品背番"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="所属生产线" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-dict-select-tag type="list"
                                v-decorator="['productionLineId', validatorRules.productionLineId]"
                                :trigger-change="true" dictCode="basic_production_line,name,id"
                                placeholder="请选择所属生产线" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </j-form-container>
        <!-- 子表单区域 -->
        <a-tabs v-model="activeKey" @change="handleChangeTabs">
            <a-tab-pane tab="部品明细" :key="refKeys[0]" :forceRender="true">
                <j-editable-table :ref="refKeys[0]" :loading="basicPartsDetailTable.loading"
                    :columns="basicPartsDetailTable.columns" @valueChange="onValueChange"
                    :dataSource="basicPartsDetailTable.dataSource" :maxHeight="300"
                    :disabled="formDisabled" :rowNumber="true" :rowSelection="true"
                    :actionButton="true" />
            </a-tab-pane>
        </a-tabs>
        <a-row v-if="showFlowSubmitButton"
            style="text-align: center;width: 100%;margin-top: 16px;"><a-button @click="handleOk">提
                交</a-button></a-row>
    </a-spin>
</template>

<script>

import pick from 'lodash.pick'
import { getAction } from '@/api/manage'
import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { validateDuplicateValue } from '@/utils/util'

export default {
    name: 'BasicProductsForm',
    mixins: [JEditableTableMixin],
    components: {
    },
    data() {
        return {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            labelCol2: {
                xs: { span: 24 },
                sm: { span: 3 },
            },
            wrapperCol2: {
                xs: { span: 24 },
                sm: { span: 20 },
            },
            // 新增时子表默认添加几行空数据
            addDefaultRowNum: 1,
            validatorRules: {
                productsSku: {
                    rules: [
                        { required: true, message: '请输入制品品番!' },
                        { validator: (rule, value, callback) => validateDuplicateValue('basic_products', 'products_sku', value, this.model.id, callback) },
                    ]
                },
                productsBack: {
                    rules: [
                        { required: true, message: '请输入制品背番!' },
                        { validator: (rule, value, callback) => validateDuplicateValue('basic_products', 'products_back', value, this.model.id, callback) },
                    ]
                },
                productionLineId: {
                    rules: [
                        { required: true, message: '请输入所属生产线!' },
                    ]
                },
            },
            refKeys: ['basicPartsDetail',],
            tableKeys: ['basicPartsDetail',],
            activeKey: 'basicPartsDetail',
            // 部品明细
            basicPartsDetailTable: {
                loading: false,
                dataSource: [],
                columns: [
                    {
                        title: '部品品番',
                        key: 'partsSku',
                        type: FormTypes.select,
                        allowSearch: true,
                        dictCode: "basic_parts,parts_sku,parts_sku",
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: undefined,
                        validateRules: [{ required: true, message: '${title}不能为空' }],
                    },
                    {
                        title: '部品背番',
                        key: 'partsBack',
                        type: FormTypes.select,
                        allowSearch: true,
                        dictCode: "basic_parts,parts_back,parts_back",
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: undefined,
                        validateRules: [{ required: true, message: '${title}不能为空' }],
                    },
                    {
                        title: '使用数量',
                        key: 'number',
                        type: FormTypes.inputNumber,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                        validateRules: [{ required: true, message: '${title}不能为空' }],
                    },
                ]
            },
            url: {
                add: "/basicProducts/basicProducts/add",
                edit: "/basicProducts/basicProducts/edit",
                queryById: "/basicProducts/basicProducts/queryById",
                basicPartsDetail: {
                    list: '/basicProducts/basicProducts/queryBasicPartsDetailByMainId'
                },
                getBySku: "/basicParts/basicParts/getBySku",
                getByBack: "/basicParts/basicParts/getByBack",
            }
        }
    },
    props: {
        //流程表单data
        formData: {
            type: Object,
            default: () => { },
            required: false
        },
        //表单模式：false流程表单 true普通表单
        formBpm: {
            type: Boolean,
            default: false,
            required: false
        },
        //表单禁用
        disabled: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    computed: {
        formDisabled() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return false
                }
                return true
            }
            return this.disabled
        },
        showFlowSubmitButton() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return true
                }
            }
            return false
        }
    },
    created() {
        //如果是流程中表单，则需要加载流程表单data
        this.showFlowData();
    },
    methods: {
        onValueChange(e) {
            if (!e.value) {
                return
            }
            if (e.column.title === '部品品番') {
                getAction(this.url.getBySku + "?sku=" + e.value).then((res) => {
                    if (res.success) {
                        if (e.row.partsBack !== res.result.partsBack) {
                            this.$refs.basicPartsDetail.setValues([{
                                rowKey: e.row.id, // 行的id
                                values: { // 在这里 values 中的 name 是你 columns 中配置的 key
                                    'partsBack': res.result.partsBack
                                }
                            }])
                        }
                    } else {
                        this.$message.warning(res.message)
                    }
                })
            } else if (e.column.title === '部品背番') {
                getAction(this.url.getByBack + "?back=" + e.value).then((res) => {
                    if (res.success) {
                        if (e.row.partsSku !== res.result.partsSku) {
                            this.$refs.basicPartsDetail.setValues([{
                                rowKey: e.row.id, // 行的id
                                values: { // 在这里 values 中的 name 是你 columns 中配置的 key
                                    'partsSku': res.result.partsSku
                                }
                            }])
                        }

                    } else {
                        this.$message.warning(res.message)
                    }
                })
            }
        },
        addBefore() {
            this.form.resetFields()
            this.basicPartsDetailTable.dataSource = []
        },
        getAllTable() {
            let values = this.tableKeys.map(key => getRefPromise(this, key))
            return Promise.all(values)
        },
        /** 调用完edit()方法之后会自动调用此方法 */
        editAfter() {
            let fieldval = pick(this.model, 'productsSku', 'productsBack', 'productionLineId')
            this.$nextTick(() => {
                this.form.setFieldsValue(fieldval)
            })
            // 加载子表数据
            if (this.model.id) {
                let params = { id: this.model.id }
                this.requestSubTableData(this.url.basicPartsDetail.list, params, this.basicPartsDetailTable)
            }
        },
        /** 整理成formData */
        classifyIntoFormData(allValues) {
            let main = Object.assign(this.model, allValues.formValue)
            return {
                ...main, // 展开
                basicPartsDetailList: allValues.tablesValue[0].values,
            }
        },
        //渲染流程表单数据
        showFlowData() {
            if (this.formBpm === true) {
                let params = { id: this.formData.dataId };
                getAction(this.url.queryById, params).then((res) => {
                    if (res.success) {
                        this.edit(res.result);
                    }
                })
            }
        },
        validateError(msg) {
            this.$message.error(msg)
        },
        popupCallback(row) {
            this.form.setFieldsValue(pick(row, 'productsSku', 'productsBack', 'productionLineId'))
        },

    }
}
</script>

<style scoped>
</style>